<template>
  <div class='wrap'>

    <el-form ref="form" :model="query" v-show="showSearch" inline label-width="80px" size="mini">
      <el-form-item label="id">
        <el-input v-model="query.id"></el-input>
      </el-form-item>
      <el-form-item label="提交时间">
        <el-date-picker clearable v-model="query.time" type="date" value-format="yyyy-MM-dd" placeholder="请选择提交时间" style="width: 177.37px;"> </el-date-picker>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="query.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="query.sex" placeholder="请选择" style="width: 177.37px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" class="select"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="query.id"></el-input>
      </el-form-item>
      <el-form-item label="QQ">
        <el-input v-model="query.id"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="query.id"></el-input>
      </el-form-item>

      <el-form-item label=" ">
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="flex">
      <div>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="formAdd">新增</el-button>
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="formEdit">修改</el-button>
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="formDel">删除</el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="formExport">导出</el-button>
      </div>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </div>

    <div class="box">
      <el-table :data="tableData" :header-cell-style="{'text-align':'center','font-weight':'bold'}" :cell-style="{'text-align':'center'}" border stripe size="mini">
        <el-table-column type=index label="序号" width="60"></el-table-column>
        <el-table-column prop='name' label="姓名" width="100"></el-table-column>
        <el-table-column prop='sex' label="性别" width="100"></el-table-column>
        <el-table-column prop='age' label="年龄" width="100"></el-table-column>
        <el-table-column prop='phone' label="电话" width="130"></el-table-column>
        <el-table-column prop='email' label="邮箱" width="160"></el-table-column>
        <el-table-column prop='QQ' label="QQ" width="130"></el-table-column>
        <el-table-column prop='time' label="时间" width="130" sortable></el-table-column>
        <el-table-column prop='addr' label="地址"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scoped">
            <el-button @click="edit(scoped.row)" type="primary" size="mini">编辑</el-button>
            <el-button @click="del(scoped.row)" type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="getList" />
    </div>

    <div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { md5 } from '@/utils/md5.js';
export default {
  name: 'list',
  data() {
    return {
      options: [{ label: '男', value: '1' }, { label: '女', value: '2' }],
      single: true,  // 非单个禁用
      multiple: true,   // 非多个禁用
      showSearch: true, // 显示搜索条件
      dialogVisible: false,
      form: {},
      query: {
        pageNum: 1,
        pageSize: 5
      },
      total: 10,
      tableData: []
    };
  },
  created() {


    this.getList();

    // console.log(md5('8977'), '');
  },
  methods: {
    formAdd() {
      this.dialogVisible = true;
    },
      
    handleClose() { },
    formEdit() { },
    formDel() { },
    edit(row){
      console.log(row);
    },
    del(row){
      
    },
    /** 导出按钮操作 */
    formExport() {
      this.$download('system/goods/export', {
        ...this.queryParams
      }, `goods_${new Date().getTime()}.xlsx`);
    },
    getList() {
      this.tableData = [
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
        { name: '亚索', age: 20, sex: '1', phone: 1839109561, email: '66113164@qq.com', QQ: 66113164, time: '2023-08-07', addr: '陕西省西安市未央区凤城六路精华名门17-1-502' },
      ];
    }
  },
  // destroyed() {
  //   this.$bus.$off('Data'); //在页面销毁生命周期加上bus.$off() 解决重复触发的问题
  // }
}
</script>

<style scoped>
.box {
  margin-top: 10px;
}
.flex {
  display: flex;
  justify-content: space-between;
}
</style>